<template>
	<view class="attendance">
		<view class="header">
			<view class="pic">
				{{pic}}
			</view>
			<view class="text">
				<view class="name">
					{{ userInfo.name }}
				</view>
				<view class="rule">
					考勤 <span style='color: blue;' @click='examine'>（查看规则）</span>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="time">
				<view class="startTime">
					上班时间：{{ attendanceInfo.startWork }}
				</view>
				<view class="endTime">
					下班时间：{{ attendanceInfo.endWork }}
				</view>
			</view>

			<!-- 当页面数据attendanceBoolean为false 且 开启程序时间为中午12点前 显示上班打卡 -->
			<view class="clockIn" v-if="new Date().getHours() < 12">
				<view v-if='!(start == 1)' @click="startWork()">
					<view v-if="distance < range" style="font-size: 48rpx;padding-top: 80rpx">打卡</view>
					<view v-else style="font-size: 48rpx;padding-top: 80rpx">外勤上班</view>
					<view class="date" style="font-size: 48rpx;padding-top: 80rpx">
						{{date}}
					</view>
				</view>
				<view v-else>
					<view style="font-size: 48rpx;padding-top: 80rpx">打卡成功</view>
					<view class="date" style="font-size: 48rpx;padding-top: 80rpx">
						{{date}}
					</view>
				</view>
			</view>
			<view class="clockIn" v-else>
				<view v-if="!(end == 1)" @click="endWork()">
					<view v-if="distance < range" style="font-size: 48rpx;padding-top: 80rpx">下班</view>
					<view v-else style="font-size: 48rpx;padding-top: 80rpx">外勤下班</view>
					<view class="date" style="font-size: 48rpx;padding-top: 80rpx">
						{{date}}
					</view>
				</view>
				<view v-else>
					<view style="font-size: 48rpx;padding-top: 80rpx">打卡成功</view>
					<view class="date" style="font-size: 48rpx;padding-top: 80rpx">
						{{date}}
					</view>
				</view>
			</view>
		</view>

	</view>
</template>
<script>
	// 引入js文件
	import AMapLoader from '@amap/amap-jsapi-loader';
	import {
		getDistance
	} from '@/utils/utils.js'
	import {
		attendance,
		startWork,
		endWork,
		resetWork,
		stateWork
	} from '@/api/attendance.js'
	import permission from '@/utils/permission.js'
	export default {
		data() {
			return {
				date: '',
				time: null,
				userInfo: null,
				pic: null,
				amapPlugin: null,
				townInfo: null,
				key: '4ed9465365237c85db7c770dd5a5e605', // 这是高德地图api申请的key
				latitude: null, // 纬度
				longitude: null, // 经度
				distance: 0, //距离
				range: 0, // 范围
				attendanceInfo: null,
				attendanceBoolean: false, // 上班卡或下班卡
				type: 'absenteeism', // 默认用户缺卡
				start: false, // 是否有打上班卡
				end: false, // 是否有打下班卡
				images: require('../../static/logo.png'),
				name: '',
				identity: ''


			};
		},
		watch: {

		},
		onLoad() {
			this.time = setInterval(() => {
				this.getDate()
			}, 1000)
		},
		onShow() {
			this.init()
			this.getLocation()
			this.state()
			console.log(this.distance,this.range);
		},
		onHide() {
			clearInterval(this.time)
		},
		onReady() {

		},
		methods: {
			init() {
				this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
				this.attendanceInfo = JSON.parse(uni.getStorageSync('attendanceInfo'))
				this.pic = this.userInfo.name.slice(this.userInfo.name.length - 2, this.userInfo.name.length)
			},
			// 获取人脸识别各种权限

			// 判断上班状态
			async state() {
				const obj = {
					id: this.userInfo.id,

				}
				const reset = await resetWork(obj)
				const state = await stateWork(obj)
				if (state.status == 0) {
					this.start = state.data.start
					this.end = state.data.end
				}
			},
			getDate() {
				const date = new Date()
				const HH = date.getHours() < 10 ? '0' + date.getHours() : date.getHours() // 获取当前小时， 不足补零
				const mm = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
				const ss = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
				this.date = HH + ':' + mm + ':' + ss
			},
			// 获取位置信息
			getLocation() {
				let that = this
				// 高德地图获取定位信息中
				uni.showLoading({
					title: '获取定位信息中...'
				})
				uni.getLocation({
					type: 'wgs84',
					success(data) {
						that.latitude = data.latitude
						that.longitude = data.longitude
						uni.hideLoading()
						that.getDistance()
					}
				})
			},
			// 获取距离
			getDistance() {
				this.townInfo = JSON.parse(uni.getStorageSync('townInfo'))
				this.range = this.townInfo.town_range
				const address = {
					latitude: this.townInfo.latitude,
					longitude: this.townInfo.longitude
				}
				const local = {
					latitude: this.latitude,
					longitude: this.longitude
				}
				this.distance = getDistance(address, local)
			},
			examine() {
				uni.navigateTo({
					url: '/pages/attendance_info/attendance_info'
				})
			},
			// 打卡操做
			work() {
				if (new Date().getHours() > 12) {
					this.startWork()
				} else {
					this.endWork()
				}
			},
			// 上班打卡
			async startWork() {
				const obj = {
					id: this.userInfo.id
				}
				const res = await startWork(obj)
				if (res.status == 0) {
					this.start = !this.start
				}
				// 使上班打卡变成 1
				// 如果点击打卡的话。默认状态为正常
				this.start = true
				this.attendanceBoolean = !this.attendanceBoolean
				const date = new Date()
				// 打卡时间
				const hour = date.getHours()
				const min = date.getMinutes()
				// 上班最晚打卡时间
				const startDate = this.attendanceInfo.startWork.split(':')
				startDate[0] = parseInt(startDate[0])
				startDate[1] = parseInt(startDate[1]) + this.attendanceInfo.intervalTime
				if (startDate[1] >= 60) {
					startDate[1] = startDate[1] - 60
					startDate[0] = startDate[0] + 1
				}

				// 判断用户是否迟到
				if (hour > startDate[0]) {
					this.type = 'late'
				} else if (hour === startDate[0]) {
					if (min > startDate[1]) {
						this.type = 'late'
					}
				} else {
					// 判断是否用户是外勤卡
					if (this.distance > this.townInfo.town_range) {
						this.type = 'field'
					} else {
						this.type = 'normal'
					}
				}

			},
			// 下班打卡
			async endWork() {
				const obj = {
					id: this.userInfo.id
				}
				const end = await endWork(obj)
				if (end.status == 0) {
					// 打卡时间
					const date = new Date()
					const hour = date.getHours()
					const min = date.getMinutes()
					this.end = true
					if (this.type === 'normal' || this.type === 'absenteeism') {
						const endDate = this.attendanceInfo.endWork.split(':');
						// 下班打卡最早时间
						endDate[0] = parseInt(endDate[0]);
						endDate[1] = parseInt(endDate[1]);
						endDate[1] = endDate[1] - this.attendanceInfo.intervalTime;
						if (endDate[1] < 0) {
							endDate[1] = endDate[1] + 60;
							endDate[0] = endDate[0] - 1;
						}
						// 判断用户是否早退
						if (hour < endDate[0]) {
							this.type = 'early'
						} else if (hour === endDate[0]) {
							if (min > endDate[1]) {
								type = 'early'
							}
						}
					}
					// 当打下班卡，证明今天工时已经结束，所以进行统计上传今日状态
					this.attendance()
				}

			},
			// 今日打卡状态
			async attendance() {
				// 当上班卡和下班卡都打了时，type就是打卡默认状态
				// 如果其中一个卡没卡。考勤状态变为缺卡，不论其是否迟到早退等
				// 如果两个卡都没打，今日算作旷工
				if (this.end && this.start) {

				} else if (this.end || this.start) {
					this.type = 'lack'
				} else {
					this.type = 'absenteeism'
				}
				const obj = {
					user_id: this.userInfo.id,
					type: this.type,

				}
				// 进行状态上传 若今日两次打卡都为打卡，算作旷工
				const res = await attendance(obj)
			},
		}
	}
</script>

<style lang="less">
	.attendance {
		padding: 20rpx;

		.header {
			display: flex;

			.pic {
				font-size: 30rpx;
				padding: 18rpx;
				background-color: blue;
				width: 60rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				color: #ffffff;
				border-radius: 54rpx;
			}

			.text {
				display: block;
				margin-left: 40rpx;

				.name {
					text-align: center;
				}
			}


		}

		.main {
			margin-top: 150rpx;

			.time {
				display: flex;
				justify-content: space-around;
				margin-bottom: 100rpx;

				.startTime,
				.endTime {
					padding: 40rpx 30rpx;
					background-color: #D5D5D5;
				}
			}

			.clockIn {
				width: 300rpx;
				height: 300rpx;
				text-align: center;
				line-height: 60rpx;
				padding: 50rpx;
				background-color: blue;
				color: #ffffff;
				border-radius: 300rpx;
				margin: auto;
			}
		}
	}
</style>
